<template>
  <div class="app-container">
    <div v-if="orderDetail">

      <el-card class="box-card" >
        <div slot="header" class="clearfix">
          <span>订单所属会员信息>>></span>
        </div>
        <div class="text item">
          <el-row :gutter="24">
            <el-col :span="6">会员手机号：{{orderDetail.member.mobile}}</el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="box-card" v-if="orderDetail.order.orderType === 1 || orderDetail.order.orderType === 2">
        <div slot="header" class="clearfix">
          <span>订单{{orderDetail.order.orderType === 1 ? '邮寄' : '取还车'}}地址信息>>></span>
        </div>
        <div class="text item">
          <el-row :gutter="24">
            <el-col :span="6">联系人：{{orderDetail.contactAddr.contactName || '--'}}</el-col>
            <el-col :span="6">联系电话：{{orderDetail.contactAddr.contactMobile || '--'}}</el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">取还地址：{{orderDetail.contactAddr.pickFullAddr  + ' -- ' + orderDetail.contactAddr.pickAddr  + ' -- ' + orderDetail.contactAddr.addrDetail }}</el-col>
          </el-row>
        </div>
      </el-card>


      <el-card class="box-card" v-if="orderDetail.order.orderType === 2 || orderDetail.order.orderType === 3">
        <div slot="header" class="clearfix">
          <span>订单所属检测站信息>>></span>
        </div>
        <div class="text item">
          <el-row :gutter="24">
            <el-col :span="6">检测站名称：{{orderDetail.station.name}}</el-col>
            <el-col :span="6">检测站手机号：{{orderDetail.station.mobile}}</el-col>
            <el-col :span="12">检测站位置：{{orderDetail.station.locPoi}}</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" v-if="orderDetail.order.orderType === 2 && orderDetail.driver">
        <div slot="header" class="clearfix">
          <span>订单所属代驾司机信息>>></span>
        </div>
        <div class="text item">
          <el-row :gutter="24">
            <el-col :span="6">司机姓名：{{orderDetail.driver.driverName}}</el-col>
            <el-col :span="6">司机手机号：{{orderDetail.driver.driverMobile}}</el-col>
          </el-row>
        </div>
      </el-card>
      <el-card class="box-card" v-if="orderDetail.order.orderType === 2 && orderDetail.driver">
        <div slot="header" class="clearfix">
          <span>订单图片信息>>></span>
        </div>
        <el-row>
          <el-col :span="7" v-for="(img, index) in imgList" :key="img.name" :offset="index > 0 ? 1 : 0" >
            <el-card :body-style="{ padding: '0px' }" >
              <div class="demo-image__placeholder">
                <div class="block">
                  <el-image :src="img.url" :fit="fit" :preview-src-list="imgPreList" :z-index="zindex" @click.stop="handleClickItem" style="width: 400px; height: 300px"></el-image>
                </div>
              </div>
              <div style="padding: 14px;">
                <span>{{img.name}}</span>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>

    </div>


  </div>
</template>

<script>
  import {getOrderDetail} from "@/api/order/order";
  import defaultSettings from '@/settings'

  export default {
    name: "Order",
    props: {
      orderId: {
        type: Number
      }
    },
    data() {
      return {
        ossPre: defaultSettings.ossPreview,
        // 遮罩层
        loading: true,
        // 查询参数
        // 表单参数
        orderDetail: undefined,
        imgpre: defaultSettings.ossPreview,
        fit: 'fill',
        zindex:999,
        imgList: [],
        imgPreList: []
      };
    },
    created() {
    },
    mounted() {
      this._getOrderDetail()
    },
    methods: {
      _getOrderDetail(){
        getOrderDetail(this.orderId).then(res => {
          this.orderDetail = res.data;
          this.imgList = res.data.imgShowVos;
          this.wrapImgPreList();
        })
      },
      wrapImgPreList(){
        this.imgList.forEach(itm => {
          this.imgPreList.push(itm.url)
        })
      },
      handleClickItem(){
        // 获取遮罩层dom

        this.$nextTick(() => {
          console.log("111111111111111111111111")
          let domImageMask = document.querySelector(".el-image-viewer__mask");
          if (!domImageMask) {
            console.log("2222222222222222222222")
            return;
          }
          domImageMask.addEventListener("click", () => {
            // 点击遮罩层时调用关闭按钮的 click 事件
            document.querySelector(".el-image-viewer__close").click();
          });
        })

      }
    }
  };
</script>
<style>
  .box-card{
    margin-top: 20px;
  }
</style>
